<template>
  <div class="setting-playrules-edit full-height full-width">
    <select-sport-type />
    <div class="setting-playrules-container row full-height ">
        <play-table :class="show_play_list ? 'col-5' :'col-7'"/>
        <create-play-rules class="col-5" @open_play_list="open_play_list"/>
        <play-list v-if="show_play_list" class="col-2 text-panda-text-light bg-panda-base-dark"/> 
    </div>
  </div>
</template>

<script>
import selectSportType from "src/components/query/selectSportType.vue";
import playTable from "src/pages/setting/playrules/edit/component/playTable.vue";
import playList from "src/pages/setting/playrules/edit/component/playList.vue"

export default {
  components: {
    selectSportType,
    playTable,
    playList,
    createPlayRules: () => import("src/pages/setting/playrules/edit/component/createPlayRules/createPlayRules.vue")
  },
  data () {
    return {
      show_play_list: false
    }
  },
  methods: {
    open_play_list () {
      this.show_play_list = true
    }
  }
};
</script>